<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
    }

    .btn {
      border: none;
      outline: none;
      font-size: inherit;
      border-radius: 4px;
      padding: 1em;
      width: 100%;
      margin: 1em 0;
      color: #fff;
      background-color: #ff5777;
    }

    .dialog-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1001;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
    }
    .dialog-mask{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .3);
      z-index: 1;
    }

    .dialog {
      width: 200px;
      height: 200px;
      background: #fff;
      overflow: auto;
      z-index: 2;
    }
  </style>
</head>
<body>

  <div class="page">
    <!-- 这里多添加一些，直至出现滚动条 -->
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <button class="btn">打开蒙层</button>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
    <p>页面</p>
  </div>
  <div class="dialog-wrapper">
    <div class="dialog-mask"></div>
    <div class="dialog">
      <!-- 这里多添加一些，直至出现滚动条 -->
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
      <p>蒙层</p>
    </div>
  </div>
  <script>
    let bodyEl = document.body;
    let top1 = 0;

    function stopBodyScroll (isFixed) {
      console.log('top1', top1)
      if (isFixed) {
        top1 = window.scrollY

        bodyEl.style.position = 'fixed'
        bodyEl.style.top1 = -top1 + 'px'
      } else {
        bodyEl.style.position = ''
        bodyEl.style.top1 = ''

        window.scrollTo(0, top1) // 回到原先的top
      }
    }

    function bodyScroll(event){
      // event.preventDefault();
    }

    const btnNode = document.querySelector('.btn')
    const dialogWrapperNode = document.querySelector('.dialog-wrapper')
    const dialogNode = document.querySelector('.dialog')
    const dialogMaskNode = document.querySelector('.dialog-mask')


    // 打开蒙层
    btnNode.addEventListener('click', () => {
      dialogWrapperNode.style.display='flex'
      stopBodyScroll(true);
      document.body.addEventListener('touchmove',bodyScroll,{ passive: false });
      // bodyEl.style.position = 'fixed'
      // bodyEl.style.height = '100%'
    }, false)
    // 关闭蒙层
    dialogMaskNode.addEventListener('click', () => {
      dialogWrapperNode.style.display='none'
      stopBodyScroll(false);
      document.body.removeEventListener('touchmove',bodyScroll,{ passive: false });
      // bodyEl.style.position = 'initial'
      // bodyEl.style.height = 'auto'
    }, false)

    // dialogNode.addEventListener('click', () => {
    //   event.preventDefault();
    // })


  </script>
</body>
</html>
